<template>
  <div>
    <div class="discount-bar" :class="{ active: index === currentPickValue }" v-for="(discount, index) in discountData"
      :key="discount.id" @click="pickDiscountCard(index)">
      <div class="bar_left">
        代金券

        <span class="expire_date">{{ discount.expire_date }} 到期</span>
      </div>

      <div class="bar_right">
        <div class="b-r-price">
          <span class="price-yang">¥</span>
          <span class="price-yuan">{{ discount.amount }}</span>
        </div>
        <div class="b-r-radio">
          <!-- <input
              type="radio"
              name="discount"
              :value="index"
              v-model="currentPickValue"
              @change="pickDiscountCard(index)"
            /> -->
          <transition name="discountFade">
            <img v-if="currentPickValue === index" src="@/assets/images/mobile/select.png" />
          </transition>
          <img v-if="currentPickValue !== index" src="@/assets/images/mobile_black/login/disagree.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DiscountBar",
  props: ["discountData"],
  data() {
    return {
      currentPickValue: 0,
    };
  },
  methods: {
    // ------ common ------
    pickDiscountCard(currentPickIndex) {
      // 取消点击
      if (this.currentPickValue === currentPickIndex) {
        this.currentPickValue = -1;
      } else {
        // 点击切换索引（界面显示）
        this.currentPickValue = currentPickIndex;
      }
      // 将选中的对应索引发射出去
      this.$emit("handlePickDiscountCard", this.currentPickValue);
    },
  },
};
</script>

<style lang="less" scoped>
.discount-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  background-color: #1e2020;
  box-shadow: 0 2px 4px 0 rgb(18, 18, 18);
  margin-bottom: 7px;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.5s ease-out;
  user-select: none;

  .bar_left {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #ffffff;

    .expire_date {
      font-size: 12px;
      color: #999999;
      margin-left: 5px;
    }
  }

  .bar_right {
    display: flex;
    align-items: center;

    .b-r-price {
      margin-right: 20px;

      span {
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #00ffb0;
        // line-height: 14px;
      }

      .price-yang {
        font-size: 12px;
      }

      .price-yuan {
        font-size: 18px;
        margin-left: 3px;
      }
    }

    .b-r-radio {
      position: relative;
      width: 18px;
      height: 18px;

      img {
        width: 18px;
        position: absolute;
      }
    }
  }
}

// .discount-bar:hover {
//   background-color: #1e202030;
// }

@media screen and (max-width: 768px) {
  .discount-bar {
    height: 100px;
    // box-shadow: 0 4px 8px 0 rgb(18, 18, 18);
    background: #2b2c2d;
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 0 40px;

    .bar_left {
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #ffffff;

      .expire_date {
        font-size: 20px;
      }
    }

    .bar_right {
      .b-r-price {
        margin-right: 40px;

        .price-yang {
          font-size: 24px;
        }

        .price-yuan {
          font-size: 36px;
          margin-left: 6px;
        }
      }

      .b-r-radio {
        width: 32px;
        height: 32px;

        img {
          width: 32px;
        }
      }
    }
  }
}

// public
.active {
  // background-color: #1e202030 !important;
}

.discountFade-enter-active {
  transition: opacity 0.5s ease;
}

.discountFade-enter,
.discountFade-leave-to {
  opacity: 0;
}
</style>
